<template>
  <div class="main">
    <div class="two">
      <keep-alive include="Caidan,Shouye">
        <router-view></router-view>
      </keep-alive>
    </div>
    <van-tabbar :route="true" inactive-color="black" active-color="#0833bc">
      <van-tabbar-item
        v-for="(value, index) in dataobj"
        :key="index"
        :to="{ name: value.name }"
      >
        <div>
          <div
            class="iconfont"
            v-html="value.icon"
            :class="{ active: value.isActive }"
          ></div>
          <div class="text">{{ value.title }}</div>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import '../assets/less/Main.less'
export default {
  name: 'Main',
  data () {
    return {
      dataobj: [
        {
          title: '首页',
          name: 'Shouye',
          urls: ['Shouye'],
          icon: '&#xe50c;'
        },
        {
          title: '菜单',
          name: 'Caidan',
          urls: ['Caidan'],
          icon: '&#xe6af;'
        },
        {
          title: '订单',
          name: 'Dingdan',
          urls: ['Dingdan'],
          icon: '&#xe68d;'
        },
        {
          title: '购物袋',
          name: 'Shop',
          urls: ['Shop'],
          icon: '&#xe621;'
        },
        {
          title: '我的',
          name: 'My',
          urls: ['My'],
          icon: '&#xe60c;'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../assets/font/iconfont.ttf') format('truetype');
}

.text {
  font-size: 10px;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 32px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
